<template>
  <a-spin :spinning="loading">
    <div class="modal-header">
      <div class="modal-title">
        <!-- <span v-if="id">{{ l('Edit') }}:{{ userName }}</span> -->
        <span>{{ l('LoginStatistics') }}:{{ userName }}</span>
      </div>
    </div>
    <div class="modal-body">
      <a-row :gutter="8">
        <!-- 日期选择 -->
        <a-col :sm="8">
          <a-form-item :label="l('DateRange')">
            <a-range-picker
              :placeholder="[l('StartDateTime'), l('EndDateTime')]"
              v-model:value="startToEnd"
              :ranges="ranges"
            />
          </a-form-item>
        </a-col>
        <a-col :sm="4">
          <!-- 搜索按钮 -->
          <a-button :type="'primary'" @click="initEcahrt()" style="margin-top: 32px">
            <span>{{ l('Search') }}</span>
          </a-button>
        </a-col>
      </a-row>
    </div>
    <!-- echart图表 -->
    <div ref="echart" style="width: 100%; height: 400px"> </div>
  </a-spin>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { ModalComponentBase } from '/@/shared/component-base';
  import { LoginLogsServiceProxy } from '/@/shared/service-proxies';
  import { LogEchartDto, EchartItemDto } from '/@/shared/service-proxies';
  import * as echarts from 'echarts';
  import dayjs, { Dayjs } from 'dayjs';

  type RangeValue = [Dayjs, Dayjs];
  export default defineComponent({
    name: 'Log details',
    mixins: [ModalComponentBase],
    props: {
      id: Number,
      userName: String,
    },
    data() {
      return {
        startToEnd: new Array<any>(),
        option: null as any,
        data: new LogEchartDto(),
        userLogservice: new LoginLogsServiceProxy(),
        echartDom: HTMLDivElement,
        successData: [] as any,
        failData: [] as any,
        ranges: {} as any,
      };
    },
    mounted() {
      //初始化日期选择框数据
      this.startToEnd = [dayjs().add(-3, 'day'), dayjs()];
      //设置日期范围选择按钮
      this.ranges[this.l('Today')] = [
        dayjs().add(0 - (dayjs().hour() as number), 'hour'),
        dayjs(),
      ] as RangeValue;
      this.ranges[this.l('InTheLastThreeDays')] = [dayjs().add(-3, 'day'), dayjs()] as RangeValue;
      //加载echart图表数据
      this.initEcahrt();
    },
    methods: {
      async initEcahrt() {
        //数据加载
        await this.userLogservice
          .getAllOrOneself(
            this.id ? this.id : undefined,
            this.startToEnd == null ? undefined : this.startToEnd[0],
            this.startToEnd == null ? undefined : this.startToEnd[1],
          )
          .then((res) => {
            this.data = res;
          });
        //数据对比--成功和失败数据条数存在不一致
        if ((this.data.success?.length as number) < (this.data.failure?.length as number)) {
          this.compareTo(
            this.data?.failure as EchartItemDto[],
            this.data.success as EchartItemDto[],
            'fail',
          );
        } else {
          this.compareTo(
            this.data.success as EchartItemDto[],
            this.data.failure as EchartItemDto[],
            'success',
          );
        }
        //测试调试
        // console.info(this.data);
        // console.info(this.successData);
        // console.info(this.failData);
        let chartDom = this.$refs.echart as HTMLElement;
        let myChart = echarts.init(chartDom);
        let option = {
          title: {
            text: this.l('LoginStatistics'),
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: [this.l('Success'), this.l('Failed')],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },

          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data.xdata?.map((p) => {
              return this._moment(p, 'YYYY-MM-DD');
            }),
          },
          yAxis: {},
          series: [
            {
              name: this.l('Success'),
              type: 'line',
              smooth: true,
              data: this.successData,
            },
            {
              name: this.l('Failed'),
              type: 'line',
              smooth: true,
              data: this.failData,
            },
          ],
        };
        option && myChart.setOption(option);
      },
      //数据对比--成功和失败数据条数存在不一致
      compareTo(moreData: EchartItemDto[], lessData: EchartItemDto[], typeData: string): void {
        //加载前清空数据
        this.successData = [] as any;
        this.failData = [] as any;
        //开始对比数据
        for (const item of moreData) {
          if (typeData === 'success') {
            this.successData.push(item.count);
            if (lessData.some((a) => a.time == item.time)) {
              this.failData.push(lessData.find((a) => a.time == item.time)?.count);
            } else {
              this.failData.push('-');
            }
          } else {
            this.failData.push(item.count);
            if (lessData.some((a) => a.time == item.time)) {
              this.successData.push(moreData.find((a) => a.time == item.time)?.count);
            } else {
              this.successData.push('-');
            }
          }
        }
      },
    },
  });
</script>
